<template>
  <div class="login-wrap" style='position:relative;'>

    <slider v-if="isShowSlider" @SliderSucess="sliderSucess" @closeSlider="closeSlider" />
    <div class="ms-login">
      <div class="ms-title" style='position:relative;text-align: center'>用户中心用户身份验证
        <img class="code" src="../../assets/404_images/bosssoft.png" width="130" alt="" srcset="">
      </div>
      <el-form ref='loginForm' :model="loginForm" :rules="loginRules"  label-width="0px" class="ms-content">
        <el-form-item prop="code">
          <el-input prefix-icon='el-icon-user-solid' style='border-bottom: 1px solid #ddd;' v-model="loginForm.code" placeholder="请输入账号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon='el-icon-unlock' type="password" placeholder="请输入密码" v-model="loginForm.password">
          </el-input>
        </el-form-item>
        <el-form-item prop="account">
          <el-input prefix-icon='el-icon-user'  placeholder="租户ID" v-model="loginForm.account" @keyup.enter.native="isShowSlider=true">
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="isShowSlider=true">登录</el-button>
        </div>
        <el-link @click="register" type="primary" style="right: 0">还没有账号？立即注册</el-link>
        <el-link @click="findPass" type="primary" style="float: right; font-weight: bolder">忘记密码</el-link>
      </el-form>
    </div>
<!--    <div class="webInfo" style='position: absolute;bottom: 0px'>-->
<!--      <div class="info-container">-->
<!--        <div class="beian">闽ICP备2021002460号</div>-->
<!--        <div class="support">CopyRight &copy; 2021-2031 博思软件</div>-->
<!--        <div class="support2">博思软件</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { Message } from 'element-ui';
import Slider from '@/views/login/Slider.vue'
import store from '@/store'
import addRoutesByResources from '@/utils/routes-add'
export default {
  components: {
    Slider
  },
  data: function () {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    // 手机号验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error('电话号码不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error('电话号码格式不正确'));
          }
        }
      }, 100);
    };
    return {
      loading:false,
      loginForm: {
        code: '100002',
        password: 'sd365sd365',
        account: 'BOSSSOFT'
      },
      loginRules: {
        code: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        account:[{required:true,message: '租户不能为空', trigger: 'blur'}]
      },
      activeName: 'first',
      param: {
        username: 'admin',
        password: '123'
      },
      isShowSlider:false,
      telParam: {
        telephone: '',
        code: '',
        vcode:''
      },
      CountDown: 60,
      buttonName: '发送验证码',
      isDisabled: false
    };
  },
  created() {
    if (sessionStorage.getItem('LoginCountDown')) {
      this.CountDown = JSON.parse(sessionStorage.getItem('LoginCountDown')).CountDown;
      this.isDisabled = JSON.parse(sessionStorage.getItem('LoginCountDown')).isDisabled;
    }
    if (this.isDisabled) {
      let timerId = setInterval(() => {
        this.CountDown--;
        this.buttonName = this.CountDown + '秒后重试';
        if (this.CountDown <= 0) {
          clearInterval(timerId);
          this.buttonName = '重新发送';
          this.CountDown = 60;
          this.isDisabled = false;
        }
      }, 1000);
    }
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem(
        'LoginCountDown',
        JSON.stringify({
          CountDown: this.CountDown,
          isDisabled: this.isDisabled
        })
      );
    });
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.setItem(
      'LoginCountDown',
      JSON.stringify({
        CountDown: this.CountDown,
        isDisabled: this.isDisabled
      })
    );
    next();
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          /**
           * 调用后端 认证方法 完成用户认证 ，认证通过的条件为 账号 密码 和租户和用户表相等
           */
          this.$store.dispatch('user/login', this.loginForm).then(res => {
            console.log('login-res', res)
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success',
                duration: 5 * 1000
              })
              // 路由跳转
              this.$router.push({ path:  '/HOME' })
            } else {
              Message({
                message: res.msg || ' 请核对您的账号密码租户信息 ' || res.code,
                type: 'error',
                duration: 5 * 1000
              })
            }
            this.loading = false
          }).catch(() => {
            Message({
              message: '请核对您的账号密码租户信息',
              type: 'error',
              duration: 5 * 1000
            })
            this.loading = false
          })

          console.log(this.loginForm)
        } else {
          console.log('表单字段违反校验规则为空或者不满足格式等')
          return false
        }
      })
    },
    sliderSucess() {
      console.log('sucess')
      var that = this
      setTimeout(function() { that.isShowSlider = false }, 1000)
      this.handleLogin()
    },
    closeSlider() {
      this.isShowSlider = false
    },
    findPass() {
      this.$router.push({
        path: '/findPass'
      });
    },
    register() {
      this.$router.push({
        path: '/register'
      });
    },

  }
};
</script>

<style scoped>
.code{
  position: absolute;
  bottom: 5px;
  right: 20px;

}
.tel-col{
  width: 70%;
}
.button-col{
  width: 30%;
}
.code-button{
  margin-left: 25px;
}
.login-wrap {

  position: relative;
  width: 100%;
  height: 100%;
  /*E:\博思后台\bosssoft-train-user-permission-centre-front-end-full-master\src\assets\img\loginbackground.jpg*/
  background-image: url('~@/assets/img/loginbackground.jpg');
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 45%;
  top: 40%;
  width: 450px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.webInfo{
  width: 100%;
  height: 10%;
  background-color: #E4E7ED;
  position: relative;
  margin:0;
  .info-container{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin:auto;
  .support{
  margin: 10px auto 5px;
  color: #687F7F;
  font-size: 13px;
  width: 260px;
}
.el-input__inner {
  border-radius: 0px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  /*outline: medium;*/
}
.support2{
  position: absolute;
  bottom: 2px;
  right: 10px;
  font-size: 13px;
}
.beian{
  color: #687F7F;
  font-size: 13px;
  width:194px;
  margin: 10px auto 5px;
}
.suggest{
  color: red;
  margin: 10px auto 5px;
  width: 340px;
  font-size: 14px;
}

}
}
</style>
